<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店详情</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			body {
				background-color: #fff;
			}
			
			.mui-content {
				background-color: #fff;
			}
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background: #fff;
			}
			
			.mui-title {
				font-size: 1.6rem;
				color: #333;
			}
			
			.hotel-introduce {
				padding: 2.1rem 2.4rem;
			}
			
			.hotel-info {
				font-size: 0;
			}
			
			.hotel-info img {
				margin-right: 1.2rem;
			}
			
			.hotel-name {
				font-size: 1.6rem;
				color: #333;
			}
			
			.hotel-title,
			.hotel-tel {
				font-size: 1.6rem;
				color: #333;
			}
			
			.title,
			.tel,
			.address,
			.desc {
				display: flex;
				align-items: flex-start;
				padding-bottom: 2.1rem;
			}
			
			.address {
				/*padding-bottom: 2.25rem;*/
				padding-bottom: 2.1rem;
			}
			
			.around img {
				vertical-align: bottom;
			}
			
			.hotel-tel {
				position: relative;
				color: #e61874;
				/*text-decoration: underline;*/
			}
			
			.hotel-tel:after {
				position: absolute;
				width: 100%;
				bottom: -0.3rem;
				left: 0;
				height: 1px;
				content: '';
				background-color: #e61874;
			}
			
			.hotel-address {
				font-size: 1.6rem;
				color: #222;
			}
			
			.hotel-service,
			.hotel-around {
				font-size: 1.6rem;
				color: #666;
			}
			
			.hotel-desc {
				font-size: 1.6rem;
				color: #666;
			}
			
			p {
				line-height: 2rem;
				font-size: 1.4rem;
				margin: 0;
				color: #999;
				padding: 1.5rem 0 2.1rem 3rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back();"></a>
			<h1 class="mui-title">酒店介绍</h1>
		</header>
		<div class="mui-content">
			<div class="hotel-introduce">
				<ul>
					<li class="hotel-info title">
						<img width="20" src="../styles/images/detail/icon_hotel.png@2x.png" />
						<span class="hotel-name">深圳雅商会馆</span>
					</li>
					<li class="hotel-info tel">
						<img width="19" src="../styles/images/detail/icon_phonel.png@2x.png" />
						<a class="hotel-tel" href=""></a>
					</li>
					<li class="hotel-info address">
						<img width="16" src="../styles/images/detail/icon_location.png@2x.png" />
						<span class="hotel-address">南山区白石洲新中路中路3号   近名商高尔夫球场</span>
					</li>
					<li class="hotel-info">
						<img width="20" src="../styles/images/detail/icon_sevice.png@2x.png" />
						<span class="hotel-service">服务</span>
						<p>叫醒服务、洗衣服务、送餐服务、旅游服务，叫醒服务、洗衣服务、送餐服务、旅游服务，</p>
					</li>
					<li class="hotel-info around">
						<img width="17.5" src="../styles/images/detail/icon_around.png@2x.png" style="align-self: flex-start;" />
						<span class="hotel-around">酒店周边</span>
						<p>酒店位于深圳华侨城景区，步行可置地铁，酒店位于深圳华侨城景区，步行可置地铁。衣服务、送餐服务、旅游服务。</p>
					</li>
					<li class="hotel-info desc">
						<img width="20" src="../styles/images/detail/icon_smile.png@2x.png" />
						<span class="hotel-desc">深圳雅商会馆是一家“IT”私密性非常好的酒店。</span>
					</li>
				</ul>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init();
			var hotelName = document.getElementsByClassName('hotel-name'); // 酒店名称
			var hotelTel = document.getElementsByClassName('hotel-tel'); // 酒店电话
			var hotelAddress = document.getElementsByClassName('hotel-address'); // 酒店地址
			var hotelService = document.getElementsByClassName('hotel-service'); // 酒店服务
			var hotelAround = document.getElementsByClassName('hotel-around'); // 酒店周边
			var hotelDesc = document.getElementsByClassName('hotel-desc'); // 酒店简介
			mui.plusReady(function() {
				var introduceData = JSON.parse(localStorage.getItem('introduceData'));
				console.log(introduceData.hotelchnname);
				hotelName[0].innerHTML = introduceData.hotelchnname;
				hotelTel[0].innerHTML = introduceData.telephone;
				hotelTel[0].setAttribute('href',"tel://" + introduceData.telephone);
				hotelAddress[0].innerHTML = introduceData.chnaddress;
				hotelService[0].nextElementSibling.innerHTML = introduceData.servicefixture + introduceData.otherfixture;
				hotelAround[0].nextElementSibling.innerHTML = '';
				hotelDesc[0].innerHTML = '';
			});
		</script>
	</body>

</html>